<template>
    <Maptalks :mapOnLoadCB="mapOnLoadCB"></Maptalks>
    <div class="pane">
        <p @click="replay">Replay</p>
    </div>
</template>

<script>
import Maptalks from "@/components/common/Maptalks.component.vue"
import MapLayerConst from "@/const/MapLayerConst"
import {ref} from "vue";

export default {
    name: "AddAnimatedPolygon.component",
    components: {Maptalks},
    setup() {

        let polygon = ref(null)

        const replay = () => {
            polygon.value.hide();
            //polygon"s animateShow
            polygon.value.animateShow({
                duration: 1500,
                easing: "out"
            }, function (frame) {
                if (frame.state.playState === "finished") {
                    console.log("finished");
                }
            });
        }


        let mapOnLoadCB = (map, mapUtil) => {
            let coords = [
                [-0.131049, 51.498568],
                [-0.107049, 51.498568],
                [-0.107049, 51.493568],
                [-0.131049, 51.493568],
                [-0.131049, 51.498568]
            ]
            mapUtil.setView(coords)

            polygon.value = new maptalks.Polygon([coords], {
                visible: false,
                symbol: {
                    "lineColor": "#34495e",
                    "lineWidth": 2,
                    "polygonFill": "rgb(135,196,240)",
                    "polygonOpacity": 0.6
                }
            });

            new maptalks.VectorLayer(MapLayerConst.MAP_POLYGON_ANIMATION_LAYER).addGeometry(polygon.value).addTo(map);

            replay();

        };

        return {
            mapOnLoadCB,
            replay
        }
    }
}
</script>

<style scoped lang="less">
.pane {
    background: #34495e;
    line-height: 28px;
    color: #fff;
    z-index: 10;
    position: absolute;
    top: 20px;
    right: 20px;
    p {
        cursor: pointer;
        display: block;
        color: #fff;
        text-align: left;
        padding: 0 10px;
        min-width: 28px;
        min-height: 28px;
        float: left
    }
}
</style>
